import {renderVma} from "../vma";
import {renderAceEditor} from "../ace";

window.vvg.pageEditors = {}
window.vvg.pageEditors.update = (name, v) => {
  if (window.vvg.pageEditors[name]) {
    window.vvg.pageEditors[name].getSession().setValue(v)
  }
}

let template = document.createElement('template')
template.id = 'pageapp-com-tpl'
template.innerHTML = `
<div style="padding-left: 10px;">
  <el-tabs
      v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
        label="style" name="first">
      <div class="pageapp-editor"
           style="height: calc(100vh - 54px)"
           id="pageapp-style"></div>
    </el-tab-pane>
    <el-tab-pane
        label="js" name="second">
      <div class="pageapp-editor"
           style="height: calc(100vh - 54px)"
           id="pageapp-js"></div>
    </el-tab-pane>
    <el-tab-pane
        v-for="(extItem, extItemKey) in ext"
        :label="extItemKey" :name="extItemKey">
      <div class="pageapp-editor"
           style="height: calc(100vh - 54px)"
           :id="'pageapp-' + extItemKey"></div>
    </el-tab-pane>
    <el-tab-pane
        label="code" name="code">
      <div class="pageapp-editor"
           style="height: calc(100vh - 54px)"
           id="pageapp-code"></div>
    </el-tab-pane>
    <el-tab-pane
        label="tpl" name="third">
      <div class="pageapp-editor"
           style="height: calc(100vh - 54px)"
           id="pageapp-template"></div>
    </el-tab-pane>
  </el-tabs>
</div>
`
document.body.appendChild(template)

setTimeout(() => {
  renderVma('pageapp', [
    {
      data() {
        return {
          activeName: 'first',
          ext: {},
          testStyle: 'display: block;width: 100%;padding: 0'
        }
      },
      methods: {
        renderAceEditor(id, content, options) {
          renderAceEditor('pageapp-' + id,
            content
            , options)
        },
        initExt(key, value) {
          this.$set(this.ext, key, 1)
          this.$nextTick(() => {
            let editor =  {}
            editor = renderAceEditor('pageapp-' + key,
              function () {
                return ''
              }
              , {
                mode: "ace/mode/html",
              })

            editor.on('blur', function(e) {
              document.dispatchEvent(new CustomEvent('change:' + key, {
                detail: editor.getSession().getValue()
              }))
            });
            window.vvg.pageEditors[key] = editor

            setTimeout(() => {
              editor.getSession().setValue(value)
            }, 300)
          })
        },
        handleClick(tab, event) {
          // console.log(tab, event);
        },
        renderCommon() {
          window.vvg.pageEditors['style'] = renderAceEditor('pageapp-style',
            window.vvg.page.css
            , {
              mode: "ace/mode/css",
            })

          window.vvg.pageEditors['style'].on('blur', function(e) {
            document.dispatchEvent(new CustomEvent('change:css', {
              detail: window.vvg.pageEditors['style'].getSession().getValue()
            }))
          });

          window.vvg.pageEditors['js'] = renderAceEditor('pageapp-js',
            function () {
              if (window.js_beautify) {
                return  window.js_beautify(window.vvg.page.js)
              }
              return  window.vvg.page.js
            }
            , {
              mode: "ace/mode/javascript",
            })

          window.vvg.pageEditors['js'].on('blur', function(e) {
            document.dispatchEvent(new CustomEvent('change:js', {
              detail: window.vvg.pageEditors['js'].getSession().getValue()
            }))
          });

          // console.log( window.vvg.tpl)
          window.vvg.pageEditors['template'] = renderAceEditor('pageapp-template',
            function () {
              return  window.vvg.tpl
            }
            , {
              mode: "ace/mode/html",
            })

          window.vvg.pageEditors['template'].on('blur', function(e) {
            document.dispatchEvent(new CustomEvent('change:template', {
              detail: window.vvg.pageEditors['template'].getSession().getValue()
            }))
          });
        }
      },
      mounted() {
        this.renderCommon()
      }
    }
  ])

}, 300)
